<template>
	<view class="ticket">
		<view class="search">
			<u-search placeholder="搜索" v-model="serach.name" @search="onSerach" @clear="initPage()" shape='square'
				:show-action='false' style="width: 100%;">
			</u-search>
			<view class="add ml-20" @click="add('')">
				<view class="iconfont iconfont-e7a7 c-329 u-font-32"></view>
				<text class="ml-10 ">新增</text>
			</view>
		</view>
		<u-tabs :list="list" active-color=' #3297ef' :is-scroll="false" :current="current" @change="change"></u-tabs>
		<view class="list-box">
			<view class="box-item" v-for="(item,index) in dataList" :key='index'>
				<view class="item-left">
					<view class="ticket-img-title">{{item.mode == 1?'常规':'抢购'}}</view>
					<image class="left-img" :src="formatPictureImg(item.img)" mode=""></image>
					<view class="left-title">
						<text class="title-top">{{item.name}}</text>
						<text class="title-center">库存：{{item.stock_count||'暂无库存'}}</text>
						<text class="title-center">{{item.one_level_name||'暂无分类'}}</text>
					</view>
				</view>
				<view class="item-right">
					<view class="right-tab">
						<text class="tab-item" :class="{'active':item.is_online==1?false:true}" @click="onDpwnUp(index,1)">上架</text>
						<text class="tab-item" :class="{'active':item.is_online==0?false:true}" @click="onDpwnUp(index,0)">下架</text>
					</view>
					<view class="right-btn" @click="add(item.pk_id)">编辑产品</view>
					<view class="right-btn" @click="openstock(item.pk_id)">管理库存</view>
				</view>
			</view>
			<sww-load-more :params="dataListParams"></sww-load-more>
		</view>
	</view>
</template>

<script>
	import {
		pagingMixin
	} from '@/mixins/sysPaging.js'
	import {
		uniModal,
		uniNavigate,
		uniToast,
		uniBack
	} from '@/utils/uniPromise.js'
	export default {
		mixins: [pagingMixin],
		data() {
			return {
				list: [{
					name: '全部',
					type: '-1'
				}, {
					name: '常规门票',
					tyep: '1'
				}, {
					name: '抢购门票',
					type: '2'
				}, {
					name: '预约门票',
					type: '3'
				}],
				current: 0,
				serach:{
					name:'',
					pk_id:'',
					type:'-1',
					is_online:-1,
				},
				dataList:[]
			}
		},
		onLoad(){
			
		},
		onReachBottom() {
			this._load_data()
		},
		onShow(){
			this.initPage()
		},
		methods: {
			initPage() {
				this.serach.pk_id = this.vuex_business.pk_id
				this._init_data('GetEntranceTicket', {
					...this.serach
				})
			},
			openstock(val){
				uniNavigate(`/package/system/ticket/stock/index?fk_ticket_pro_id=${val}`)
			},
			change(e){
				this.serach.type =e == 0?'-1':e
				this.current = e
				this.initPage()
			},
			onSerach(e){
				this.serach.name = e
				this.initPage()
			},
			add(val){
				if(!val){
					uniNavigate('/package/system/ticket/addticket/index')
				}else{
					uniNavigate(`/package/system/ticket/addticket/index?pk_id=${val}`)
				}
				
			},
			//切换产品上架下架
			onDpwnUp(index, el) {
				this.$loading('请稍等')
				this.$set(this.dataList[index], 'is_online', el)
				let params = {
					is_online: el,
					business_id: this.vuex_business.pk_id,
					pk_id: this.dataList[index].pk_id
				}
				this.$UpdateModify('b_ticket_pro', {
					...params
				}).then(res => {
					// this.initPage()
					this.$hide()
					this.$toast(el == 1 ? '上架成功' : '下架成功')
				})
			
			},
		}
	}
</script>
<style>
	page {
		background-color: #f5f5f5;
	}
</style>
<style lang='scss' scoped>
	.ticket {
		.c-329 {
			color: #3297ef;
		}

		.ml-10 {
			margin-left: 12rpx;
		}

		.ml-20 {
			margin-left: 20rpx;
		}
		.ticket-img-title {
			position: absolute;
			left: 0;
			top: 0;
			width: 59rpx;
			height: 34rpx;
			text-align: center;
			line-height: 34rpx;
			color: #ffffff;
			background: #C532EF;
			border-radius: 8rpx 0 8rpx 0;
			background-color: #C532EF;
			font-size: 24rpx;
		}

		.search {
			display: flex;
			align-items: center;
			padding: 20rpx 30rpx;
			background-color: #fff;
			border-top: 1rpx solid #f9f9f9;
			border-bottom: 1rpx solid #f9f9f9;

			.add {
				display: flex;
				align-items: center;
				width: 120rpx;

			}
		}

		.list-box {
			padding: 23rpx 24rpx 0;

			.box-item {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				background-color: #fff;
				border-radius: 10rpx;
				padding: 22rpx;
				margin-bottom: 24rpx;
				.item-left {
					display: flex;
					align-items: center;
					position: relative;
					.left-img {
						width: 178rpx;
						height: 178rpx;
						border-radius: 10rpx;
						margin-right: 20rpx;
					}

					.left-title {
						display: flex;
						flex-direction: column;
						width: 300rpx;
						.title-top {
							font-size: 28rpx;
							color: #222;
							font-weight: bold;
							margin-bottom: 66rpx;
						}

						.title-center {
							font-size: 26rpx;
							color: #999;
							font-weight: bold;
						}

						.title-price {
							font-size: 30rpx;
							color: #FF0E0E;
							font-weight: bold;
							position: relative;
							right: 4rpx;
						}
					}
				}

				.item-right {
					display: flex;
					flex-direction: column;

					.right-tab {
						width: 150rpx;
						border-radius: 4rpx;
						line-height: 50rpx;
						display: flex;
						align-items: center;
						height: 50rpx;
						border: 1px solid #3297EF;

						.tab-item {
							width: 75rpx;
							height: 100%;
							color: #fff;
							background-color: #3297EF;
							text-align: center;
							border-radius: 4rpx 0 0 4rpx;
							overflow: hidden;

							&.active {
								background-color: #fff;
								color: #3297EF;

							}
						}
					}

					.right-btn {
						width: 150rpx;
						height: 50rpx;
						line-height: 50rpx;
						text-align: center;
						border: 1px solid #333333;
						border-radius: 4rpx;
						font-size: 24rpx;
						color: #333;
						margin-top: 16rpx;
					}
				}
			}
		}
	}
</style>
